<template>
  <div class="paper-table" v-loading="loading">
    <div class="paper-table-header">
      <div class="paper-table-header-title" v-for="(item,index) in paperDate" :key="index">
        <div class="paper-left" :style="{color:item.color}">
          <span class="label">{{ item.label }}</span>
          <span class="value">{{ item.value }}</span>
        </div>
        <div class="paper-right">
          <img :src="`${item.img}`">
        </div>
      </div>
    </div>
    <el-table
      :data="tableData"
      :header-cell-style="{ background: '#f5f7fa' }"
      border
      style="width: 100%;"
    >
      <el-table-column type="index" align="center" width="100" label="题目序号"/>
      <el-table-column prop="topic.type.name" label="题目类型" align="center" />
      <el-table-column prop="topic.topic" label="题目内容" align="center" />
      <el-table-column prop="topic.score" label="该题分数" align="center" />
      <el-table-column align="center" label="正确答案">
        <template slot-scope="scope">
          {{ handleSolution(scope.row.topic?.content) }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="员工答案">
        <template slot-scope="scope">
          {{ handleStaffAnswer(scope.row.answer,scope.row.topic?.content) }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="批改结果">
        <template slot-scope="scope">
          <svg-icon v-if="scope.row.is_true === 1" icon-class="correct" />
          <svg-icon v-if="scope.row.is_true === 0" icon-class="error" />
          <!-- <el-tag v-if="scope.row.is_true === 1" type="success">√</el-tag>
          <el-tag v-if="scope.row.is_true === 0" type="danger">×</el-tag> -->
        </template>
      </el-table-column>
      <!-- <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button
            type="primary"
            icon="el-icon-edit"
            circle
            @click="handleEdit(scope.row)"
          />
          <el-button type="danger" 
                    @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column> -->
    </el-table>
    <el-drawer title="题目详情" :visible.sync="drawer" :wrapperClosable="false">
      <el-form ref="ruleForm" :model="ruleForm" class="demo-ruleForm">
        <el-form-item label="题目名称" prop="topic">
          <el-input v-model="ruleForm.topic" />
        </el-form-item>
        <el-form-item label="题目类型" prop="name">
          <el-input v-model="ruleForm.name" />
        </el-form-item>
        <el-form-item label="题目答案" prop="content">
          <el-input v-model="ruleForm.content" />
        </el-form-item>
        <el-form-item label="该题分数" prop="score">
          <el-input v-model="ruleForm.score" />
        </el-form-item>
        <el-form-item label="是否答对" prop="is_true">
          <el-select v-model="ruleForm.is_true" placeholder="请选择">
            <el-option
              v-for="item in topicOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </el-drawer>
  </div>
</template>
<script>
export default {
  props: {
    tableData: {
      type: Array,
      required: true,
    },
    paperFormtion: {
      type: Object,
      default: () => {},
    },
    questionData:{
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      drawer: false,
      loading:true,
      paperDate:[],
      ruleForm: {
        topic: null,
        name: null,
        content: null,
        score: null,
        is_true: null,
      },
      topicOptions: [
        {
          value: 0,
          label: "答错",
        },
        {
          value: 1,
          label: "答对",
        },
      ],
    };
  },
  watch: {
    questionData: {
      immediate: true,
      handler(newValue) {
        console.log(newValue,'newValue');
        if (newValue!== undefined && newValue?.allTopic) {
          this.updateQuestionData(newValue);
        }
      }
    }
  },
  methods: {
    handleEdit(data) {
      this.ruleForm.name = data?.topic?.type?.name;
      this.ruleForm.topic = data?.topic?.topic;
      this.ruleForm.content = this.handleSolution(data?.topic?.content);
      this.ruleForm.score=data?.topic?.score
      this.ruleForm.is_true = data?.is_true
      this.drawer = true;
    },
    handleDelete(data) {
      console.log(data);
    },
    handleSolution(arr) {
      if (Array.isArray(arr) && arr.length > 0) {
        return arr
          .filter((item) => item.is_ok === 1)
          .map((item) => item.content)
          .join("、 ");
      }
    },
    handleStaffAnswer(answer, content) {
      const arr = JSON.parse(answer);
      if (Array.isArray(arr)) {
        return arr.map(item => {
          const topics = content && content.filter(topic => item == topic.id)
          .map(topic => topic.content).join('、');
          if (topics && topics.length > 0) {
            return topics;
          } else {
            return null;
          }
        }).join('、');
      } else {
        const topics = content && content.filter(item => item.id == answer);
        if (topics && topics.length > 0) {
          return topics.map(topic => topic.content).join("、 ");
        } else {
          return null;
        }
      }
    },
    updateQuestionData(data){
      let accuracy
      if (!Number.isInteger(data?.accuracy)) {
        const roundedDown = data?.accuracy?.toString().split('.');
        accuracy=roundedDown[0]
      }else{
        accuracy=data?.accuracy
      }
      
      this.paperDate.push(
        {img:require('../image/allTopic.svg'),color:'#D9866E',label:'总题目',
        value:`${data?.allTopic}题`},
        {img:require('../image/answer.svg'),color:'#77E3C1',label:'答对题目',
        value:`${data?.answerTopic}题`},
        {img:require('../image/answerIncorrectly.svg'),color:'#2F699C',label:'答错题目',
        value:`${data?.wrongTopic}题`},
        {img:require('../image/accuracy.svg'),color:'#CD9335',label:'正确率',
        value:`${accuracy}%`},
      )
      if (data?.isPass===0) {
        this.paperDate.push(
          {img:require('../image/fail.svg'),color:'#F56C6C',label:'是否及格',
        value:'不及格'}
        )
      } else {
        this.paperDate.push(
          {img:require('../image/pass.svg'),color:'#7D70B4',label:'是否及格',
        value:'及格'}
        )
      }
      this.loading=false
    },
    // handleDataUpdate(){
    //   this.loadingTable=false
    //   console.log(this.questionData,'questionData');
    // }
  },
};
</script>
<style lang="scss" scoped>
.paper-table {
  margin-top: 20px;
  padding: 0 20px;
  &-header {
    display: flex;
    margin: 20px 0;
    &-title {
      position: relative;
      display: flex;
      flex-wrap: wrap;
      margin-right: 40px;
      flex-basis: calc(20% - 10px);
      min-height: 100px;
      transform: translateZ(0);
      &:last-child {
        margin-right: 0;
      }
      .paper-left{
        position: absolute;
        top: 30%;
        left: 10%;
        display: flex;
        flex-direction: column;
        z-index: 9;
        .value{
          margin-top: 10px;
          font-weight: 550;
          font-size: 20px;
        }
      }
      .paper-right{
        width: 100%;
        height: 100%;
        img{
          width: 100%;
          height: 100%;
          border-radius: 6px;
          // object-fit: cover;
          // object-position: center;
        }
      }
    }
  }
}
.demo-ruleForm {
  padding: 0 20px;
}
</style>
